<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021-09-29
  Time: 10:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="application/x-javascript">

        function $(id) {
            return document.getElementById(id);
        }

        function check() {
            return checkUsername() && checkPassword() && checkPassword2() && checkName() && checkPhone() && checkIdCard() && checkAge() && checkBirth() && checkEmail() && checkQQ() && checkAddress();
        }


        function checkUsername() {
            var username = $("username").value;
            var patten = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,9}$");
            if (!patten.test(username)) {
                $("msg_username").innerText = "用户名必须是字母和数字的组合，并且不能以数字开头，最少6位";
                return false;
            } else {
                $("msg_username").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }

        function checkPassword() {
            var password = document.getElementById("password").value;
            patten = new RegExp("^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@_])[0-9A-Za-z!@_]{8,20}$");
            if (!patten.test(password)) {
                document.getElementById("msg_password").innerText = "请输入密码，密码是字母与数字以及_@!组成的字母并且最少8位";
                return false;
            } else {
                document.getElementById("msg_password").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }


        function checkPassword2() {
            var password2 = document.getElementById("password2").value;
            if (password != password2) {
                document.getElementById("msg_password2").innerText = "两次密码输入不一致";
                return false;
            } else {
                document.getElementById("msg_password2").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }

        function checkName() {
            var name = document.getElementById("name").value;
            patten = new RegExp("^[\u4E00-\u9FA5]{2,5}$");
            if (!patten.test(name)) {
                document.getElementById("msg_name").innerText = "请输入正确的中文名字，2-5个汉字";
                return false;
            } else {
                document.getElementById("msg_name").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }


        function checkPhone() {
            var phone = document.getElementById("phone").value;
            patten = new RegExp("^1[3456789]\d{9}$");
            if (!patten.test(phone)) {
                document.getElementById("msg_phone").innerText = "请输入正确中国大陆手机号码";
                return false;
            } else {
                document.getElementById("msg_phone").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }


        function checkIdCard() {
            var idcard = document.getElementById("idcard").value;
            patten = new RegExp("^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$");
            if (!patten.test(idcard)) {
                document.getElementById("msg_idCard").innerText = "请输入正确中国18位身份证号";
                return false;
            } else {
                document.getElementById("msg_idCard").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }


        function checkAge() {
            var age = document.getElementById("age").value;
            if (isNaN(age)) {
                document.getElementById("msg_age").innerText = "请输入一个数字";
                return false;
            } else if (parseInt(age) > 60 || parseInt(age) < 3) {
                document.getElementById("msg_age").innerText = "年龄只能在3到60之间";
                return false;
            } else {
                document.getElementById("msg_age").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }

        }


        function checkBirth() {
            var birth = document.getElementById("birth").value;
            patten = new RegExp("^(18|19|20|(3\d))\d{2}-((0[1-9])|(1[0-2]))-(([0-2][1-9])|10|20|30|31)$");
            if (!patten.test(birth)) {

                document.getElementById("msg_birth").innerText = "请输入正确的出生日期，格式为yyyy-MM-dd";
                return false;
            } else {
                document.getElementById("msg_birth").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }


        function checkEmail() {
            var email = document.getElementById("email").value;
            patten = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$");
            if (!patten.test(email)) {

                document.getElementById("msg_email").innerText = "请输入正确的电子邮箱地址";
                return false;
            } else {
                document.getElementById("msg_email").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }

        function checkQQ() {
            var qq = document.getElementById("qq").value;
            patten = new RegExp("^[1-9][0-9]{4,}$");
            if (!patten.test(qq)) {

                document.getElementById("msg_qq").innerText = "请输入正确的qq号码";
                return false;
            } else {
                document.getElementById("msg_qq").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }

        function checkAddress() {
            var address = document.getElementById("address").value;
            patten = new RegExp("^\.{4,}$");
            if (!patten.test(address)) {
                document.getElementById("msg_address").innerText = "请输入正确地址，地址长度不能小于4";
                return false;
            } else {
                document.getElementById("msg_address").innerHTML = "<img src='resource/img/right.png'>";
                return true;
            }
        }

    </script>

    <style>
        span {
            color: red;
        }
    </style>


</head>
<body>
<center>
    <h1>欢迎注册无良凉皮会员</h1>
    <form action="doregister.jsp" onsubmit="return check();">
        <table>
            <tr>
                <td>用户名(<span>*</span>)：</td>
                <td><input type="text" name="username" id="username" onblur="checkUsername()"></td>
                <td><span id="msg_username"></span></td>
            </tr>
            <tr>
                <td>密码(<span>*</span>)：</td>
                <td><input type="password" name="password" id="password" onblur="checkPassword()"></td>
                <td><span id="msg_password"></span></td>
            </tr>
            <tr>
                <td>确认密码(<span>*</span>)：</td>
                <td><input type="password" name="password2" id="password2" onblur="checkPassword2()"></td>
                <td><span id="msg_password2"></span></td>
            </tr>
            <tr>
                <td>姓名(<span>*</span>):</td>
                <td><input type="text" name="name" id="name" onblur="checkName()"></td>
                <td><span id="msg_name"></span></td>
            </tr>
            <tr>
                <td>手机号(<span>*</span>)：</td>
                <td><input type="text" name="phonr" id="phone" onblur="checkPhone()"></td>
                <td><span id="msg_phone"></span></td>
            </tr>
            <tr>
                <td>性别(<span>*</span>)：</td>
                <td>
                    <input type="radio" name="sex" value="1">男
                    <input type="radio" name="sex" value="0" checked>女
                </td>
            </tr>
            <tr>
                <td>身份证号(<span>*</span>)：</td>
                <td><input type="text" name="idcard" id="idcard" onblur="checkIdCard()"></td>
                <td><span id="msg_idCard"></span></td>
            </tr>
            <tr>
                <td>年龄(<span>*</span>)：</td>
                <td><input type="text" name="age" id="age" onblur="checkAge()"></td>
                <td><span id="msg_age"></span></td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="text" name="birth" id="birth" onblur="checkBirth()"></td>
                <td><span id="msg_birth"></span></td>
            </tr>
            <tr>
                <td>电子邮箱(<span>*</span>)：</td>
                <td><input type="text" name="email" id="email" onblur="checkEmail()"></td>
                <td><span id="msg_email"></span></td>
            </tr>
            <tr>
                <td>QQ(<span>*</span>):</td>
                <td><input type="text" name="qq" id="qq" onblur="checkQQ()"></td>
                <td><span id="msg_qq"></span></td>
            </tr>
            <tr>
                <td>地址(<span>*</span>):</td>
                <td><input type="text" name="address" id="address" onblur="checkAddress()"></td>
                <td><span id="msg_address"></span></td>
            </tr>
            <tr>
                <td><input type="submit" value="无论如何我要吃凉皮"></td>
                <td><input type="reset" value="太苛刻了，我不吃了"></td>
            </tr>
        </table>
    </form>


</center>

</body>
</html>
